<template>

  <div class="live-container" :style="{
      marginTop: componentData.data.marginTop + 'px',
      marginBottom: componentData.data.marginBottom + 'px',
      padding: `0 ${componentData.data.marginLeftRight}px`,
    }">
    <template v-for="(item,key) in live_list" v-if="live_list.length>0">
      <div class="cover-container" @click="toLive(item.roomid)">
        <div class="live_list_title_tags">
          <span class="live_ing" v-if="item.start_time<nowTime && nowTime<item.end_time">
            <img src="/static/images/live_ing.gif"  alt="">
            直播中
          </span>
          <span class="live_not_start" v-if="item.start_time>nowTime">未开始</span>
          <span class="live_over" v-if="nowTime>item.end_time">已结束</span>
        </div>
        <img :src="item.cover_img" class="cover-image" mode="aspectFill"  alt="直播封面" />
        <div class="anchor-container">
          <div class="anchor-avatar" >
            <img :src="item.share_img" mode="aspectFill"  class="avatar-image" alt="主播头像" />
          </div>
          <div class="anchor-info">
            <div class="anchor-name">{{ item.name }}</div>
            <div class="anchor-status" v-if="componentData.data.show_nickname">主播:{{ item.anchor_name }} </div>
          </div>
        </div>
      </div>
      <div class="product-container" v-if="item.goods.length && componentData.data.show_goods">
        <div class="goods-box" v-for="goods_item in item.goods">
          <div class="product-image">
            <img :src="goods_item.cover_img" class="image" alt="商品图片" />
          </div>
          <div class="product-info">
            <template v-if="goods_item.price_type==1" >
              <div class="product-price" style="margin: 0 auto;width: 65%">￥{{ goods_item.price / 100}}</div>
            </template>
            <template v-if="goods_item.price_type==2">
              <div class="product-price">￥{{ goods_item.price / 100}}~￥{{ goods_item.price2 / 100}}</div>
            </template>
            <template v-if="goods_item.price_type==3">
              <div style="display: flex;height: 18px;line-height: 18px">
                <div class="product-price" style="width: 50%">
                  ￥{{ goods_item.price / 100}}
                </div>
                <div  style="width: 50%;font-size: 12px;text-decoration:line-through;color: #7a7a7a">
                  ￥{{ goods_item.price2 / 100}}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>
    <template v-if="live_list.length<=0">
      <div class="noSetting"></div>
    </template>
  </div>
</template>

<script>

export default {
  props: ['componentData'],
  data:function (){
    return {
      nowTime:parseInt(Date.now()/1000),
      live_list:[], // 直播间数据
    }
  },
  methods:{
	toLive(roomid){
		wx.navigateTo({
		    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomid}`
		});
	},
    async getLivesListsList() {
		return new Promise(async resolve => {
			const {
				status,
				data
			} = await this.$request('DiyStore/Api/getLivesList',{
				needErrorMsg: false,
				count:this.componentData.data.live_count
			});
			if (status == 1) {
				this.live_list = data;
				resolve(true);
			} else {
				resolve(false);
			}
		})
    }
  },
  watch:{
      "componentData.data.live_count":{
        deep: true,
        immediate: true,
        handler(n) {
          if(this.componentData.data.live_type==1){
            this.getLivesListsList();
          }
        },
      },
      "componentData.data.live_list":{
        deep: true,
        immediate: true,
        handler(n) {
          this.live_list = n;
        },
      },
      "componentData.data.live_type":{
        deep: true,
        immediate: true,
        handler(n) {
          if(n==1){
            // 动态获取直播列表
			console.log("获取直播列表");
            this.getLivesListsList();
          }else if(n==2){
            this.live_list = this.componentData.data.live_list;
          }
        },
      },
  }
};
</script>

<style scoped>
.goods-box{
  text-align: center;
  width: 23%;
  margin-left: 10px;
}
.goods-box:first-child{
  margin-left: 0px;
}
.live-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cover-container {
  position: relative;
  height: 0;
  padding-top: 56.25%;
}

.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anchor-container {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0px;
  background: rgba(0,0,0,.2);
  width: 100%;
  color: #fff;

}

.anchor-avatar {
  width: 50px;
  height: 50px;
  margin-right: 12px;
  margin: 10px;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.anchor-info {
  display: flex;
  flex-direction: column;
}

.anchor-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.anchor-status {
  font-size: 12px;
  color: #fff;
}

.product-container {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #f5f5f5;
}

.product-image {
  text-align: center;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  display: flex;
  flex-direction: column;

}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.product-price {
  font-size: 10px;
  font-weight: bold;
  border-radius: 12px;
  background: linear-gradient(-90deg,#ff3883,#ff2d2d);
  color: #fff;
  height: 18px;

}

.no-product {
  font-size: 14px;
  color: #999999;
  padding: 12px;
}


.live_list_title_tags span{
  display: block;
  width: 60px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
}
.live_list_title_tags .live_ing{
  width: 70px;
  background: linear-gradient(-90deg,#ff3883,#ff2d2d);
}
.live_ing img{
  width: 10px;
  height: 10px;
}

.live_list_title_tags .live_not_start{
  background: linear-gradient(-90deg,#41dbaa,#48d997);
}

.live_list_title_tags .live_over{
  background: linear-gradient(-90deg,#babacf,#9fa1bb)
}
</style>
